<template>
  <div>
    <h2>Count组件</h2>
    <!--    <p>count的值:{{ $store.state.count.count }}</p>
    <button @click="increment">count的值累加</button>
    <p>电影列表的长度{{ $store.state.movie.movieList.length }}</p> -->

    <p>count的值:{{ count }}</p>
    <button @click="increment">count的值累加</button>
    <p>电影列表的长度{{ movieList.length }}</p>
    <p>电影列表中名字在3-6的</p>
    <ol>
      <li v-for="item in getMovieList3_6" :key="item.tvId">{{ item.name }}</li>
    </ol>
  </div>
</template>

<script>
/*
  模块化以后，对我们获取state中的数据会产生影响 多了一层模块的结构
  对辅助函数获取方法是没有影响的，对辅助函数获取state的值有影响
 */

// 开启命名空间以后 数据和方法都会多一层模块的结构
// 使用辅助函数的话 第一个参数为模块明 后面会模块对应的数据或者方法
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "Count",
  mounted() {
    console.log(this);
  },
  computed: {
    ...mapState("count", ["count"]),
    ...mapState("movie", ["movieList"]),
    ...mapGetters("movie", ["getMovieList3_6"]),
  },
  methods: {
    ...mapMutations("count", ["increment"]),
  },
};
</script>

<style></style>
